import { lazy, Suspense } from "react";
import {
  Navigate,
  createBrowserRouter,
  RouterProvider,
  RouteObject,
} from "react-router-dom";

interface AppRoute extends Omit<RouteObject, "children"> {
  meta?: {
    auth?: boolean;
  };
  children?: AppRoute[];
}

const Login = lazy(() => import("../pages/login/index"));
const Layout = lazy(() => import("../layout/index"));
const Dashboard = lazy(() => import("../pages/dashboard/index"));
const Mine = lazy(() => import("../pages/mine/index"));
const More = lazy(() => import("../pages/more/index"));
const Like = lazy(() => import("../pages/like/index"));

const routes: AppRoute[] = [
  { path: "login", element: <Login /> },
  {
    path: "/",
    element: <Layout />,
    children: [
      { index: true, element: <Navigate to="/dashboard" replace /> },
      { path: "dashboard", element: <Dashboard /> },
      { path: "more", element: <More /> },
      { path: "mine", element: <Mine /> },
      { path: "like", element: <Like /> },
    ],
  },
];

const router = createBrowserRouter(routes as RouteObject[]);

const Router = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RouterProvider router={router} />
    </Suspense>
  );
};

export default Router;
